<template>
  <div class="main">
    <mine-title>项目管理</mine-title>
    <div class="content">
      <div class="block-header">
        <div class="block-header-left">
          <mine-button type="primary" @click="addInstance()"><i class="iconfont icon-add-line"></i>新建项目</mine-button>
          <mine-button @click="deleteInstance" secondary :disabled="!multipleSelection.length"><i class="iconfont icon-delete-line"></i>删除</mine-button>
          <mine-button type="primary" secondary @click="loadData()"><i class="iconfont icon-reset-line"></i>刷新</mine-button>
        </div>
        <div class="block-header-right"></div>
      </div>
      <el-table
        class="table"
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        ref="multipleTable">
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column label="序号" show-overflow-tooltip width="60">
          <template slot-scope="scope">
            <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }} </span>
          </template>
        </el-table-column>
        <el-table-column label="项目名称" prop="itemName" show-overflow-tooltip>
          <template slot="header">
            <span>项目名称</span>
            <mine-table-search @searchSubmit="searchSubmit" name="itemName"></mine-table-search>
          </template>
        </el-table-column>
        <el-table-column label="所属单位" prop="unit" show-overflow-tooltip>
          <template slot="header">
            <span>所属单位</span>
            <mine-table-search @searchSubmit="searchSubmit" name="unit"></mine-table-search>
          </template>
        </el-table-column>
        <el-table-column label="模型数量" prop="modelCount" show-overflow-tooltip>
          <template slot="header">
            <span>模型数量</span>
            <mine-table-search @searchSubmit="searchSubmit" name="modelCount"></mine-table-search>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <mine-button type="text" @click="check(scope.row)">详情</mine-button>
          </template>
        </el-table-column>
      </el-table>
      <mine-pagination
        @numberChange="numberChange"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage">
      </mine-pagination>
    </div>
  </div>
</template>
<script>
import qs from "qs";
export default {
  data () {
    return {
      listQuery: {
      },
      // table参数
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      multipleSelection: [],
      loading: false,
      tableHeight: window.innerHeight - 330
    };
  },
  methods: {
    searchSubmit (value) {
      if (value.key === 'itemName') {
        this.listQuery.itemName = value.value;
      }
      if (value.key === 'modelCount') {
        this.listQuery.modelCount = value.value;
      }
      if (value.key === 'unit') {
        this.listQuery.unit = value.value;
      }
      this.loadData(true);
    },
    screenSubmit (value) {
      if (value.key === 'unit') {
        this.listQuery.unit = value.value;
      }
      this.loadData(true);
    },
    async loadData (flag) {
      if (flag) {
        this.currentPage = 1;
      }
      const params = {
        ...this.listQuery,
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      this.loading = true;
      try {
        const res = await this.$store.dispatch('itemPageList', qs.stringify(params, { indices: false }));
        const result = res.data || {};
        // TODO： 定制后台数据处理
        if (result.success) {
          const data = result.data;
          this.tableData = data.list && data.list.length ? data.list : [];
          this.total = data.rowCount || 0;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      } catch (e) {
        console.error(e);
      }
      this.loading = false;
    },
    addInstance () {
      this.$router.push({
        path: '/addItem'
      });
    },
    async deleteInstance () {
      this.$mineConfirm('确认要删除这个项目', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const ids = this.multipleSelection.map((item) => item.id);
        console.log(this.multipleSelection, ids)
        this.loading = true;
        try {
          const res = await this.$store.dispatch('itemBatchDelete', { ids: ids });
          const result = res.data || {};
          if (result.success) {
            this.$message.success('删除成功');
            this.loadData(true);
          } else {
            this.$message.error(result.msg || '删除失败');
          }
        } catch (e) {
          console.error(e);
        }
        this.loading = false;
      }).catch(() => {});
    },
    // 查看详情
    check (val) {
      this.$router.push({
        path: '/itemDetail',
        query: {
          id: val.id
        }
      });
    },
    handleSelectionChange(selection){
      this.multipleSelection = selection;
    },
    numberChange (val) {
      switch (val.flag) {
        case 'pageSize':
          this.pageSize = val.pageSize;
          this.loadData(true);
          break;
        case 'currentPage':
          this.currentPage = val.currentPage;
          this.loadData(false);
          break;
        default:
          break;
      }
    },
  },
  mounted () {
    this.loadData();
  }
}
</script>

<style lang="less" scoped>
.table {
  margin-top: 15px;
}
//.el-button--danger {
//  color:red;
//}
</style>
